import React, { Component } from 'react'

export default class Cls extends Component {
    constructor(){
        super()//执行父类的构造函数
        this.state = {
            msg: '你好,我是孟庆明'
        }
    }
    // 挂载后
    componentDidMount(){
        console.log('挂载后 componentDidMount');
    }
    // 更新后
    componentDidUpdate(){
        console.log('更新后 componentDidUpdate');
    }
    // 卸载前
    componentWillUnmount(){
        console.log('卸载前 componentWillUnmount');
    }
    handleClick() {
        console.log('我被执行了');
        // this.setState({})//不建议使用
        // this.setState是修改状态的唯一方式
        this.setState({
            msg: '你好，孟凡宇'
        })
    }
  render() {//软件视图的方法，类组件中一定有这个方法
    return (
      <div>
        <h1>{this.state.msg}</h1>
        <button onClick={this.handleClick.bind(this)}>改名</button>
      </div>
    )
  }
}

// React类组件的第一个问题：this指向问题，因为JS中this是运行时绑定的，所以在类组件中使用会经常变化，所以此时可以把正确的this传进去或者使用箭头函数
// React类组件的第二个问题：类组件间最后打包会把组件所有的功能提醒全部打包进代码，就算没有用到也会打包，这样会增加打包代码的体积
// setState是异步更新的（18以后）它做了两件事情：1、修改状态2、通知视图更新
